<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.25" charset="UTF-8">
    <title>Product Details</title>
    <link rel="stylesheet" href="/css/jpetstore.css" type="text/css" media="screen" />
</head>
<body>
<header th:replace="common/top"></header>
<!-- 修复多余 > 符号并转换返回链接 -->
<div id="Content">
<div id="BackLink">
    <a th:href="'/catalog/viewCategory?categoryId='+${product.category}">
        Return to <label th:text="${product.category}">Category ID</label>
    </a>
</div>

<div id="Catalog">
    <!-- 修正会话属性引用 -->
    <h2 th:text="${product.productName}">Product Name</h2>

    <table>
        <tr>
            <th>Item ID</th>
            <th>Product ID</th>
            <th>Description</th>
            <th>List Price</th>
            <th>&nbsp;</th>
        </tr>
        <!-- 转换 JSTL 循环 -->
        <tr th:each="item:${product.itemList}">
            <td>
                <a th:href="'/catalog/viewItem?itemId='+${item.itemId}"
                   th:text="${item.itemId}">Item ID</a>
            </td>
            <td th:text="${product.productId}">PRODUCT ID</td>
            <td th:text="${item.attribute1}">Item Attributes</td>

            <!-- 属性拼接优化 -->

            <!-- 价格格式化 -->
            <td th:text="'$'+${#numbers.formatDecimal(item.listPrice,1,2)}">Item List Price</td>
            <td>
                <a th:href="@{/catalog/addItemToCart(itemId=${item.itemId})}" >Add to Cart</a>
            </td>
        </tr>
    </table>
</div>
</div>
<footer th:replace="common/bottom"></footer>

<!--脚本-->
<script th:src="@{/js/background.js}" count="500"></script>
</body>
</html>